<template>
	<view class="zone">
		<Header title="每日任务" color="#fff"></Header>
		<view class="main">
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<!-- 新人任务 -->
			<view class="content" v-show="stat == 1">
				<view class="item1" v-for="(item,index) in tasklist" :key="index">
					<view class="left">
						<p>{{item.name}} <image v-if="item.id == 5" class="posaimg" src="http://img.cpgm.cc/panda/static/forest/icon.png" mode="widthFix" /></p>
						<p v-if="item.explain">{{item.explain}}</p>
						<p class="bottext">
							<image v-if="item.type ==1 " src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
							<image v-if="item.type ==3 " src="http://img.cpgm.cc/panda/static/home/dengji.png" mode="widthFix" />
							<image v-if="item.type ==2 " src="http://img.cpgm.cc/panda/static/self/sj.png" mode="widthFix" />
							<text v-if="item.type < 4" >奖励：<span>{{item.reward}}</span>{{item.type==1?'银元':item.type==2?'水晶':'战力'}}</text>
							<text v-if="item.type == 4">认证高级玩家</text>
						</p>
					</view>
					<!-- <view class="button" >领取</view> -->
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="receive(item)">
								{{!!item.is_rece?'已领取':'领取'}}
							</u-button>
				</view>
			</view>

			<!-- 每日任务 -->
			<view class="content" v-show="stat == 2">
				<view class="item1" v-for="(item,index) in gmlist" :key="index">
					<view class="left">
						<p>{{item.name}} <image v-if="item.id == 3" class="posaimg" src="http://img.cpgm.cc/panda/static/forest/icon.png" mode="widthFix" /></p>
						<p class="explain" v-if="item.explain">{{item.explain}}</p>
						<p class="bottext">
							<image v-if="item.type ==1 " src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
							<image v-if="item.type ==3 " src="http://img.cpgm.cc/panda/static/home/dengji.png" mode="widthFix" />
							<image v-if="item.type ==2 " src="http://img.cpgm.cc/panda/static/self/sj.png" mode="widthFix" />
							<text v-if="item.type < 4" >奖励：<span>{{item.reward}}</span>{{item.type==1?'银元':item.type==2?'水晶':'战力'}}</text>
							<text v-if="item.type == 4">认证高级玩家</text>
							<text v-if="item.type == 5">市场出售手续费降到10% </text>
							<text v-if="item.type == 6">幸运值+ 1000 ,市场出售手续费降到5% <br>银元赠送手续费降到 5%</text>
							<text v-if="item.type == 7">幸运值+ 2000 ,银元赠送手续费降到2%</text>
							<text v-if="item.type == 8">额外奖励 <span>{{item.reward}}</span>银元</text>
						</p>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="getGmTask(item)">
								{{!!item.is_rece?'已领取':'领取'}}
							</u-button>
				</view>
				
			</view>

			<!-- 列表 -->
			<view class="content" v-show="stat == 3">
				<view class="item1" v-for="(item , index) in invitelsit" :key="item.id"> 	
					<view class="left">
						<p>邀请{{item.num}}名1队好友完成实名认证 <image v-if="item.num == 2" class="posaimg" src="http://img.cpgm.cc/panda/static/forest/icon.png" mode="widthFix" /> </p>
						<p class="bottext">
							<text v-if="index == 0">开通渠道收益+团队奖励 <br> 水晶赠送手续费永久降至5%  </text>
							<text v-else>奖励： <span>{{item.money}}</span> 零钱</text>
						</p>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="receiveface(item)">{{!!item.is_rece?'已领取':'领取'}}</u-button>
				</view>
			</view>
		</view>

			<!-- 请输入兑换码 -->
		<u-mask :show="show">
			<view class="warp">
				<view class="givebox">
					<view class="m_title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>请输入兑换码</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="m_list">
						<view class="m_item">
							<text>兑换码</text>
							<input type="number" v-model="numdata" placeholder="请输入兑换码"
								placeholder-class="ipttxt" />
						</view>
					</view>
					<view class="flexbtn">
						<view class="button quit" @click="enjoyqq">一键加群</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="button confirm" @click="exchange()">确认</u-button>
					</view>
					
				</view>
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '大冒险任务',
						isrequest:true,
					},
					{
						id: 2,
						name: '游戏任务',
						isrequest:false,
					},
					{
						id: 3,
						name: '邀请任务',
						isrequest:false,
					},
				],
				stat: 1,
				tasklist:[
					{
						id:1,
						name:'完成实名认证',
						type:1,
						reward:1,
					},
					{
						id:2,
						name:'扫荡任意副本一次',
						type:3,
						reward:20,
					},
					{
						id:3,
						name:'赠送或被赠送一次银元',
						type:3,
						reward:20,
					},
					{
						id:4,
						name:'赠送或被赠送一次水晶',
						type:3,
						reward:50,
					},
					{
						id:5,
						name:'获得7张或以上潮玩熊猫卡',
						type:4,
						reward:5,
					},
					{
						id:6,
						name:'使用潮玩熊猫挖到10宝石',
						type:3,
						reward:100,
					},
					{
						id:7,
						name:'使用潮玩熊猫挖到50宝石 ',
						type:3,
						reward:100,
					},
					{
						id:8,
						name:'使用潮玩熊猫挖到100宝石 ',
						type:3,
						reward:100,
					},
					{
						id:9,
						name:'参与大逃杀10次 ',
						type:3,
						reward:20,
					},
				],
				gmlist:[
					{
						id:1,
						name:'首次回收18888红包',
						type:2,
						reward:2888,
					},
					{
						id:2,
						name:'自由之刃高爆版90级',
						type:5,
						reward:2,
					},
					{
						id:3,
						name:'自由之刃高爆版120级',
						type:6,
						reward:2,
					},
					{
						id:4,
						name:'自由之刃高爆版200级  ',
						type:7,
						reward:2,
					},
					{
						id:5,
						name:'自由之刃高爆版累计充值10元',
						type:1,
						reward:3,
					},
					{
						id:6,
						name:'自由之刃高爆版累计充值100元 ',
						type:1,
						reward:10,
					},
					{
						id:7,
						name:'自由之刃高爆版累计充值500元 ',
						type:1,
						reward:20,
					},
					{
						id:8,
						name:'自由之刃高爆版累计充值1000元',
						type:1,
						reward:30,
					},
					{
						id:9,
						name:'自由之刃高爆版累计充值3000元',
						type:1,
						reward:50,
					},
					{
						id:10,
						name:'自由之刃高爆版累计充值10000元',
						type:1,
						reward:100,
					},
				],
				invitenum: 0, //我邀请的人数
				seestat: 0, //查看邀请奖励下标
				seecurrent: 0,
				vilidate_nums: 0,
				facelistdata: [
					{
						num: 2,
						gold: 6,
						vilidate: 0,
						is_rece: false
					},
					{
						num: 5,
						gold: 10,
						vilidate: 0,
						is_rece: false
					},
					{
						num: 10,
						gold: 18,
						vilidate: 0,
						is_rece: false
					},
					{
						num: 20,
						gold: 40,
						vilidate: 0,
						is_rece: false
					},
					{
						num: 35,
						gold: 60,
						vilidate: 3,
						is_rece: false
					},
					{
						num: 55,
						gold: 85,
						vilidate: 5,
						is_rece: false
					},
					{
						num: 80,
						gold: 105,
						vilidate: 8,
						is_rece: false
					},
					{
						num: 110,
						gold: 130,
						vilidate: 10,
						is_rece: false
					},
					{
						num: 150,
						gold: 180,
						vilidate: 15,
						is_rece: false
					},
					{
						num: 200,
						gold: 240,
						vilidate: 20,
						is_rece: false
					},
					{
						num: 250,
						gold: 250,
						vilidate: 25,
						is_rece: false
					},
					{
						num: 300,
						gold: 250,
						vilidate: 30,
						is_rece: false
					},
					{
						num: 350,
						gold: 250,
						vilidate: 35,
						is_rece: false
					},
					{
						num: 400,
						gold: 250,
						vilidate: 40,
						is_rece: false
					},
					{
						num: 450,
						gold: 250,
						vilidate: 45,
						is_rece: false
					},
					{
						num: 500,
						gold: 250,
						vilidate: 50,
						is_rece: false
					}
				],
				show:false,
				numdata:'',
				dayrequest:false,
				qqurl: '',
				invitelsit:'',
			};
		},
		onLoad(){
			this.getUserInfo();
			this.newTaskList();
		},
		methods: {

			// tab切换
			tabchange(id) {
				this.stat = id
				if(id == 2 && !this.tablist[id - 1].isrequest) {
					this.gmTaskList();
				}else if(id == 3 && !this.tablist[id - 1].isrequest) {
					this.faceList();
				}
			},



			// 邀请任务获取列表
			async faceList(){
				let res = await this.$http.index.faceList();
				this.invitelsit = res.data
				this.check_nums = res.vilidate_nums
				if(res.code == 1) {
					this.tablist[2].isrequest = true
				}
			},

			// 领取实名好友奖励
			async receiveface(item){
				console.log(item);
				if(item.is_rece) {
					this.$u.taost('奖励已领取')
				}else {
					let res = await this.$http.index.receFaceReward({
						cert_num:item.num
					})
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.faceList()
					}
				}
			},

		
			// 获取游戏任务列表
			async gmTaskList(){
				let res = await this.$http.index.gmTaskList();
				this.gmlist = res.data.map((item , index)=> {
					return {
						...this.gmlist[index] , 
						...item
					}
				})
				if(res.code == 1) {
					this.tablist[1].isrequest = true
				}
			},

			// 领取游戏奖励
			async getGmTask(item){
				let phone_type = this.$u.os();
				if(item.is_rece) {
					this.$u.toast('奖励已领取')
				}else {
					let res = await this.$http.index.getGmTask({
						id:item.id,
						phone_type:phone_type
					})
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.gmTaskList();
					}
				}
			},


			// 获取新人任务列表状态
			async newTaskList(){
				let res = await this.$http.index.newTaskList();
				this.tasklist = res.data.map((item,index)=> {
					return {
						...this.tasklist[index],
						...item
					}
				})
				this.$forceUpdate()
			},


			// 领取新人任务 弹窗完成，
			async receive(item) {
				if(!item.is_rece) {
					let res = await this.$http.index.newTask ({
						id:item.id
					});
					this.$u.toast(res.msg);
					if(res.code == 1) {
						this.newTaskList();
					}
				}else {
					this.$u.toast('奖励已领取')
				}
			},

			// 输入兑换码
			async exchange(){
				if(this.numdata == '' || this.numdata == null) {
					this.$u.toast('请输入兑换码')
				}else {
					let res = await this.$http.index.newTask ({
						id:3,
						code:this.numdata
					});
					this.$u.toast(res.msg);
					if(res.code == 1) {
						this.show = false
						this.newTaskList();
					}
				}
			},

			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo()
			},	
	
		},
	}
</script>

<style lang="less">
	.zone {
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
		min-height: 100vh;
	}

	.main {
		padding: 10px 10px 0;
	}

	// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,0.7);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 5px;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 7px;
		// backdrop-filter: blur(50px);

		view {
			width: 50%;
			height: 42px;
			text-align: center;
			line-height: 42px;
			color: #343434;
			font-size: 13px;
			font-weight: 600;
			border-radius: 7px;
			opacity: 0.6;
		}
	}

	.active {
		color: #FFFFFF !important;
		background: #000000 !important;
		opacity: 1 !important;
	}

	.item1 {
		background: #FFFFFF;
		border-radius: 7px;
		padding: 15px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.button {
			width: 72px;
			height: 33px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			color: #B73800;
			font-weight: 600;
			font-size: 14px;
		}
	}

	.left {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		p:nth-child(1) {
			color: #343434;
			font-size: 14px;
			font-weight: 600;

			display: flex;
			align-items: center;

		}
		image {
			width: 20px;
			margin-right: 5px;
		}
		
		.explain {
			margin-top: 10px;
			color: #343434;
			font-size: 13px;
		}
		.bottext {
			margin-top: 10px;
			display: flex;
			align-items: center;
			color: #343434;
			font-size: 13px;

			span {
				font-size: 12px;
				font-weight: bold;
				color: #fff;
				line-height: 18px;
				background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-right: 2px;
			}
		}
	}


.grey {
	filter: grayscale(1);
}

.already{
	opacity: 0.6;
}







// 转赠弹窗

.givebox {
	background: url('http://img.cpgm.cc/panda/static/my/bg3.png');
	border-radius: 19px;
	padding: 15px;
	background-size: 100% 100%;

	.button {
		width: 60%;
		height: 45px;
		color: #fff;
		margin: 0 auto;
		margin-top: 20px;
		background: #000000;
		border-radius: 21px;
	}
}

.m_title {
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		position: relative;
		color: #131314;
		font-size: 16px;
		margin: 0 10px;
		font-weight: 600;
		z-index: 99;
	}

	text::before {
		content: '';
		position: absolute;
		left: 15%;
		top: 0;
		width: 30px;
		height: 100%;
		border-radius: 20%;
		background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		z-index: -1;
	}

	image {
		width: 12px;
	}
}

.button2 {
	color: #239D4C;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 13px;
		margin-left: 5px;
	}

	.seposabox {
		position: absolute;
		top: 100%;
		left: 0;
		transform: translateX(-32%);
		padding: 4px;
		width: 74px;
		height: 100px;
		background: #FFFFFF;
		border: 1px solid #FEE1C3;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;

		view {
			color: #696969;
		}
	}
}

.danb {
	flex: 1;
}

image {
	width: 12px;
}

.sjbox {
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	margin: 10px auto 0;
	background: #fff;
	border-radius: 10px;

	image {
		width: 15px;
		margin-right: 10px;
	}

	text {
		font-size: 12px;
	}
}

.m_list {
	margin-top: 20px;
}

.m_item {
	width: 100%;
	box-sizing: border-box;
	padding: 15px 10px;
	background: #fff;
	border-radius: 5px;
	margin: 5px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #FEE1C3;

	text {
		width: 30%;
	}
	input {
		flex: 1;
	}
}

.closed {
	width: 30px;
	position: relative;
	left: calc(50% - 15px);
	margin-top: 20px;
}

.popbox {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 300px;
	padding: 15px;
}

.flexbtn {
	display: flex;
	align-items: center;

	.button {
		width: 45% !important;
	}

	.quit {
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
	}

	.confirm {
		border-radius: 5px;
	}
}


.content {
	height: calc(100vh - 150px);
	overflow: hidden;
	overflow-y: scroll;
}

.grey {
	filter: grayscale(1);
}

.posaimg {
	width: 30px !important;
	margin-left: 4px;
}





</style>
